<template>
  <div class="dashboard-container">
    <div class="dashboard-text" style="margin-bottom: 10px">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="机房名称">
          <el-input
            v-model="queryParams.labName"
            placeholder="模糊查询"
            clearable
            style="width: 160px"
          />
        </el-form-item>

        <el-form-item label="机房用途">
          <el-input
            v-model="queryParams.func"
            placeholder="模糊查询"
            clearable
            style="width: 160px"
          />
        </el-form-item>
        <el-form-item label="机房容量">
          <el-input
            v-model="queryParams.capacity"
            placeholder="请输入"
            clearable
            type="number"
            style="width: 100px"
          />
        </el-form-item>
        <el-form-item label="机房楼层">
          <el-input
            v-model="queryParams.tier"
            placeholder="请输入"
            clearable
            max="5"
            min="1"
            type="number"
            style="width: 100px"
          />
        </el-form-item>
        <!-- <el-form-item label="使用状态">
          <el-select
            v-model="queryParams.status"
            placeholder="使用状态"
            clearable
            style="width: 100px"
          >
            <el-option label="空闲" value="0" />
            <el-option label="占用" value="1" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addItem"
            >新增</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="null-tips" v-show="dataList.length == 0">
      <img src="@/assets/images/null.svg" alt="" />
      <p>查询结果为空</p>
    </div>

    <div class="wrapper">
      <el-tooltip
        class="item"
        effect="dark"
        :content="item.description"
        placement="top"
        v-for="item in dataList"
        :key="item.labId"
      >
        <!-- item.residue == 0 ? '#FFEDED' : '#E7FAF0' -->

        <div
          class="occupy-box"
          @click="itemClick(item)"
          :style="{
            'background-color':
              item.residue == 0
                ? '#FFEDED'
                : item.residue == item.capacity
                ? '#fff'
                : '#E7FAF0',
          }"
        >
          <el-tag
            class="itemStatus"
            :type="
              item.residue == 0
                ? 'danger'
                : item.residue == item.capacity
                ? 'info'
                : 'success'
            "
            >{{
              item.residue == 0
                ? "爆满"
                : item.residue == item.capacity
                ? "空闲"
                : "空闲"
            }}</el-tag
          >
          <p class="occupyTitle">{{ item.labName }}</p>
          <p>容量:{{ item.capacity }}/{{ item.capacity - item.residue }}</p>
          <p>用途:{{ item.func }}</p>
          <p>位置:{{ item.address }}</p>
          <div class="delItem" @click.stop="labDel(item)">
            <el-button type="danger" size="mini">删除</el-button>
          </div>
        </div>
      </el-tooltip>
    </div>
    <popup ref="popup" @getList="getList" />
  </div>
</template>
  
<script>
import { labList, labDel } from "@/api/studentUserAdmin/index";
import popup from "./components/index.vue";
export default {
  name: "laboratory",
  components: {
    popup,
  },
  data() {
    return {
      dataList: [], //机房列表数据
      // 查询参数
      queryParams: {
        labName: "", //机房名称
        capacity: "", //机房容量
        status: "", //使用状态
        func: "", //机房功能
        tier: "1", //楼层高度
      },
      IsOccupy: "", //是否占用
      IsOccupyList: [
        { label: "占用", value: 0 },
        { label: "空闲", value: 1 },
      ],
      Level: "", //楼层
      LevelList: [
        { label: "一楼", value: 1 },
        { label: "二楼", value: 2 },
        { label: "三楼", value: 3 },
        { label: "四楼", value: 4 },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //删除机房
    labDel(row) {
      this.$confirm(`是否确认删除 ${row.labName} 的数据项?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          labDel({
            labId: row.labId,
          }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addItem() {
      this.$refs["popup"].showEdit({}, "add");
    },
    itemClick(row) {
      this.$refs["popup"].showEdit(row, "edit");
    },
    /** 查询机房列表 */
    getList() {
      const loading = this.$loading({
        lock: true,
        text: "查询中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      labList(this.queryParams).then((res) => {
        loading.close();
        this.dataList = res.rows;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        labName: "",
        capacity: "",
        status: "",
        func: "",
      };
      this.getList();
    },
  },
};
</script>
  
<style lang="scss" scoped>
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.wrapper {
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(7, 160px);
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  /*  声明行的高度  */
  .occupy-box {
    width: 160px;
    height: 128px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px #d8d8d8;
    position: relative;
    overflow: hidden;
    .itemStatus {
      position: absolute;
      top: 0;
      right: 0;
    }
    .occupyTitle {
      width: 100px;
      font-weight: 600;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    p {
      margin: 0;
      padding-left: 10px;
      margin-top: 8px;
      color: #666;
    }
    p:nth-child(4) {
      margin-top: 4px;
    }
    p:nth-child(5) {
      margin-top: 4px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }
}

.flex {
  display: flex;
  align-items: center;
}

.mgl1 {
  margin-left: 10px;
}

.mgl2 {
  margin-left: 20px;
}

.mgt1 {
  margin-top: 10px;
}

.mgt2 {
  margin-top: 20px;
}

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 18px;
  }
}

.null-tips {
  width: 180px;
  margin: 100px auto;
  img {
    width: 180px;
  }
  p {
    text-align: center;
    color: #666;
    margin: 0;
  }
}

.delItem {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
  